<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
			<shopro-login-modal></shopro-login-modal>
		<!-- #endif -->
		<view class="express-info">
				<view class="good-img" v-if="orderInfo.goods_list">
					<image :src="orderInfo.goods_list[0].sku_image" ></image>
				</view>
				<view class="express-detail">
					<view class="express-status">{{resultExpress.status_name}}</view>
					<view class="express-no">{{orderInfo.express_company_name}}  {{orderInfo.delivery_no}} </view>
				</view>
		</view>
		<view class="express-box">
			<u-time-line>
				<u-time-line-item v-for="(item, index) in resultExpress.list" :key="index" >
					<template v-slot:content>
						<view>
							<view class="u-order-desc">{{item.remark}}</view>
							<view class="u-order-time">{{item.datetime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				resultExpress: {},
				orderInfo:{},
			};
		},
		onLoad({id}) {
			this.getExpress(id);
		},
		methods:{
			getExpress(_id){
				this.myHttp({
					url:'/api/order/package',
					data:{
						order_id: _id
					}
				}).then(res=>{
						this.resultExpress = res.data.list[0].trace;
						this.orderInfo = res.data.list[0];
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	
	.content{
		background-color: #F3F3F3;
		padding-top: 14upx;
		min-height: 95vh;
		.express-info{
			margin: 0 auto;
			
			width: 700upx;
			height: 152upx;
			background: #FFFFFF;
			border-radius: 10upx;
			display: flex;
			align-items: center;
			padding: 25upx;
			.good-img{
				width: 90upx;
				height: 91upx;
				background: #FFFFFF;
				border: 1upx solid #EEEEEE;
				border-radius: 10upx;
				padding: 5upx;
				margin-right: 18upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.express-box{
			padding: 29upx 40upx;
			width: 700upx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 10upx;
			margin-top: 14upx;
		}
	}
</style>
